<template>
  <div class="app-container">
    <el-col :span="24">
      <generate-form ref="generateForm" :data="jsonData" :remote="remoteFuncs" :value="editData" />
    </el-col>
    <el-col :span="22">
      <div class="generate-block">
        <el-button type="primary" @click="handleSubmit">提交</el-button>
        <el-button type="primary">重置</el-button>
      </div>
    </el-col>
    <el-form ref="form" :model="form" lable-width="80px">
      <el-col :span="24" class="border" style="margin:20px auto;">
        <el-col :span="12" class="borderbottom">
          <el-col :span="2" class="vertical-text border-right">
            出票人
          </el-col>
          <el-col :span="22" class="billMan">
            <el-col :span="5" class="full">全称</el-col>
            <el-col :span="19">
              <el-select v-model="form.select" trigger="hover" class="filter-item select" style="width: 130px">
                <el-option :label="1" value="1"/>
                <el-option :label="2" value="2"/>
                <el-option :label="3" value="3"/>
              </el-select>
            </el-col>
          </el-col>
          <el-col :span="22" class="billMan">
            <el-col :span="5" class="full">账号</el-col>
            <el-col :span="19">
              <el-input v-model="form.input1" class="select" placeholder=""/>
            </el-col>
          </el-col>
          <el-col :span="22" class="billMan">
            <el-col :span="5" class="full">开户银行</el-col>
            <el-col :span="19">
              <el-select v-model="form.select2" trigger="hover" class="filter-item select" style="width: 130px">
                <el-option label="中国工商银行" value="China"/>
                <el-option label="中国建设银行" value="CCB"/>
                <el-option label="中国农业银行" value="AG"/>
              </el-select>
            </el-col>
          </el-col>
          <el-col :span="22" class="billMan">
            <el-col :span="5" class="full">开户行号</el-col>
            <el-col :span="19">
              <el-select v-model="form.select3" trigger="hover" class="filter-item select" style="width: 130px">
                <el-option label="123213" value="China"/>
                <el-option label="12312" value="CCB"/>
                <el-option label="1231" value="AG"/>
              </el-select>
            </el-col>
          </el-col>
        </el-col>
        <el-col :span="12" class="borderbottom">
          <el-col :span="2" class="vertical-text border-right">
            收票人
          </el-col>
          <el-col :span="22" class="billMan">
            <el-col :span="5" class="full">全称</el-col>
            <el-col :span="19">
              <el-select v-model="form.select4" trigger="hover" class="filter-item select" style="width: 130px">
                <el-option :label="1" value="1"/>
                <el-option :label="2" value="2"/>
                <el-option :label="3" value="3"/>
              </el-select>
            </el-col>
          </el-col>
          <el-col :span="22" class="billMan">
            <el-col :span="5" class="full">账号</el-col>
            <el-col :span="19">
              <el-input v-model="form.input2" class="select" placeholder=""/>
            </el-col>
          </el-col>
          <el-col :span="22" class="billMan">
            <el-col :span="5" class="full">开户银行</el-col>
            <el-col :span="19">
              <el-select v-model="form.select5" trigger="hover" class="filter-item select" style="width: 130px">
                <el-option label="中国工商银行" value="China"/>
                <el-option label="中国建设银行" value="CCB"/>
                <el-option label="中国农业银行" value="AG"/>
              </el-select>
            </el-col>
          </el-col>
          <el-col :span="22" class="billMan">
            <el-col :span="5" class="full">开户行号</el-col>
            <el-col :span="19">
              <el-select v-model="form.select6" trigger="hover" class="filter-item select" style="width: 130px">
                <el-option label="123213" value="China"/>
                <el-option label="12312" value="CCB"/>
                <el-option label="1231" value="AG"/>
              </el-select>
            </el-col>
          </el-col>
        </el-col>

        <el-col :span="12">
          <el-col :span="8" class="billMan" style="line-height:56px;text-align:center;">出票金额</el-col>
          <el-col :span="3" class="billMan" style="padding:12px;">人民币(大写)</el-col>
          <el-col :span="13" class="billMan" style="line-height:56px;">
            <el-input v-model="form.input3" class="select" placeholder=""/>
          </el-col>
        </el-col>
        <el-col :span="12">
          <el-col v-for="(item,index) in array" :key="index" :span="2" class="billMan">
            <el-col :span="24" class="capital">{{ item }}</el-col>
            <el-col :span="24" class="capital_">{{ form.input[index+4] }}
              <input v-model="form.input4[index]" class="capital_input" placeholder="">
            </el-col>
          </el-col>
        </el-col>
        <el-col :span="12" style="border-right:1px solid #ddd;">
          <el-col :span="8" class="billMan" style="line-height:56px;text-align:center;">承兑人信息</el-col>
          <el-col :span="16" style="line-height:28px;text-align:center;">
            <el-col :span="5" class="billMan">全称</el-col>
            <el-col :span="19" style="border-bottom:1px solid #ddd;box-sizing:border-box;"><input type="text" style="line-height:20px;"></el-col>
          </el-col>
          <el-col :span="16" style="line-height:27px;text-align:center;">
            <el-col :span="5" class="billMan">账号</el-col>
            <el-col :span="19" style="border-bottom:1px solid #ddd;box-sizing:border-box;"><input type="text" style="line-height:20px;" ></el-col>
          </el-col>
        </el-col>
        <el-col :span="12">
          <el-col :span="24" style="line-height:28px;text-align:center;border-bottom:1px solid #ddd;box-sizing:border-box;">
            <el-col :span="10">开户行信息</el-col>
            <el-col :span="14"><input type="text" style="line-height:20px;"></el-col>
          </el-col>
          <el-col :span="24" style="line-height:28px;text-align:center;border-bottom:1px solid #ddd;box-sizing:border-box;">
            <el-col :span="10">开户行名称</el-col>
            <el-col :span="14"><input type="text" style="line-height:20px;" ></el-col>
          </el-col>
        </el-col>
        <el-col :span="12" style="border-bottom:1px solid #ddd;border-right:1px solid #ddd;">
          <el-col :span="8" style="line-height:36px;border-right:1px solid #ddd;border-bottom:1px solid #ddd;text-align:center;">交易合同</el-col>
          <el-col :span="16" style="line-height:36px;border-bottom:1px solid #ddd;padding-left:10px;"><input type="text" style="line-height:20px;border-bottom:1px solid #ddd;"></el-col>
          <el-col :span="8" style="line-height:36px;border-right:1px solid #ddd;border-bottom:1px solid #ddd;text-align:center;">能否转让</el-col>
          <el-col :span="16" style="border-bottom:1px solid #ddd;line-height:36px;">
            <el-select v-model="form.select7" trigger="hover" class="filter-item select" style="width: 130px;line-height:28px;">
              <el-option label="123213" value="China"/>
              <el-option label="12312" value="CCB"/>
              <el-option label="1231" value="AG"/>
            </el-select>
          </el-col>
        </el-col>
        <el-col :span="12" style="border-bottom:1px solid #ddd;">
          <el-col :span="6" class="billMan" style="line-height:75px;text-align:center;">承兑信息</el-col>
          <el-col :span="18" style="line-height:37px;padding-left:10px;">出票人承诺：本汇票请予以承兑，到期无条件付款。</el-col>
          <el-col :span="18" style="line-height:37px;padding-left:10px;">承兑日期:<input type="text" style="line-height:20px;"></el-col>
        </el-col>
      </el-col>
    </el-form>
    <el-col :span="24">
      <generate-form ref="generateForm" :data="jsonData2" :remote="remoteFuncs" :value="editData" />
      <div class="generate-block">
        <el-button type="primary" @click="handleSubmit">提交</el-button>
        <el-button type="primary">重置</el-button>
      </div>
    </el-col>
  </div>
</template>
<script>
import GenerateForm from '@/components/CreateForm/GenerateForm'
import '@/components/CreateForm/styles/FormCreate.css'
import { getCodeList } from '@/api/codelist'
import GenerateTable from '@/components/CreateTable/GenerateTable'
export default {
  components: {
    GenerateForm,
    GenerateTable
  },
  data: function() {
    return {
      form: {
        input4: {},
        select1: '',
        input: '', input2: '', input3: '',
        select2: '',
        China: '', AG: '', CCB: '', select3: '', select4: '', select5: '', select6: '', select7: ''
      },
      array: ['十', '亿', '千', '百', '十', '万', '千', '百', '十', '元', '角', '分'],
      jsonData: {
        'list': [
          {
            'type': 'grid',
            'name': '栅格布局',
            'icon': 'th',
            'columns': [
              {
                'span': 10,
                'list': [
                  {
                    'type': 'date',
                    'name': '出票日期',
                    'icon': 'regular/calendar-alt',
                    'options': {
                      'defaultValue': '',
                      'readonly': false,
                      'disabled': false,
                      'editable': true,
                      'clearable': true,
                      'placeholder': '',
                      'startPlaceholder': '',
                      'endPlaceholder': '',
                      'type': 'date',
                      'format': 'yyyy-MM-dd',
                      'timestamp': false,
                      'required': false,
                      'width': '100%',
                      'remoteFunc': 'func_1540796825000_69744'
                    },
                    'key': '1540796825000_69744',
                    'model': 'date_1540796825000_69744',
                    'rules': []
                  }
                ]
              },
              {
                'span': 10,
                'list': [
                  {
                    'type': 'select',
                    'name': '票据状态',
                    'icon': 'regular/caret-square-down',
                    'options': {
                      'defaultValue': '',
                      'multiple': false,
                      'disabled': false,
                      'clearable': false,
                      'placeholder': '',
                      'required': false,
                      'showLabel': false,
                      'width': '100%',
                      'options': [
                        {
                          'value': '下拉框1'
                        },
                        {
                          'value': '下拉框2'
                        },
                        {
                          'value': '下拉框3'
                        }
                      ],
                      'remote': true,
                      'remoteOptions': [],
                      'props': {
                        'value': 'value',
                        'label': 'label'
                      },
                      'remoteFunc': 'BillType'
                    },
                    'key': '1540796841000_76652',
                    'model': 'select_1540796841000_76652',
                    'rules': []
                  }
                ]
              }
            ],
            'options': {
              'gutter': 0,
              'justify': 'start',
              'align': 'top',
              'remoteFunc': 'func_1540796820000_38998'
            },
            'key': '1540796820000_38998',
            'model': 'grid_1540796820000_38998',
            'rules': []
          },
          {
            'type': 'grid',
            'name': '栅格布局',
            'icon': 'th',
            'columns': [
              {
                'span': 10,
                'list': [
                  {
                    'type': 'date',
                    'name': '汇票到期日',
                    'icon': 'regular/calendar-alt',
                    'options': {
                      'defaultValue': '',
                      'readonly': false,
                      'disabled': false,
                      'editable': true,
                      'clearable': true,
                      'placeholder': '',
                      'startPlaceholder': '',
                      'endPlaceholder': '',
                      'type': 'date',
                      'format': 'yyyy-MM-dd',
                      'timestamp': false,
                      'required': false,
                      'width': '100%',
                      'remoteFunc': 'func_1540796858000_16477'
                    },
                    'key': '1540796858000_16477',
                    'model': 'date_1540796858000_16477',
                    'rules': []
                  }
                ]
              },
              {
                'span': 10,
                'list': [
                  {
                    'type': 'input',
                    'name': '票据号码',
                    'icon': 'regular/keyboard',
                    'options': {
                      'width': '100%',
                      'defaultValue': '',
                      'required': false,
                      'dataType': 'number',
                      'pattern': '',
                      'placeholder': '',
                      'readonly': false,
                      'disabled': false,
                      'clearable': false,
                      'remoteFunc': 'func_1540796940000_26140'
                    },
                    'key': '1540796940000_26140',
                    'model': 'input_1540796940000_26140',
                    'rules': [
                      {
                        'type': 'number',
                        'message': '单行文本格式不正确'
                      }
                    ]
                  }
                ]
              }
            ],
            'options': {
              'gutter': 0,
              'justify': 'start',
              'align': 'top',
              'remoteFunc': 'func_1540796853000_41641'
            },
            'key': '1540796853000_41641',
            'model': 'grid_1540796853000_41641',
            'rules': []
          }
        ],
        'config': {
          'labelWidth': 100,
          'labelPosition': 'right'
        },
        'table': {
          'showRemove': false,
          'showIndexCol': false,
          'showEdit': false,
          'showExport': false,
          'showAdd': false,
          'stripe': true,
          'border': true
        }
      },
      jsonData2: {
        'list': [
          {
            'type': 'grid',
            'name': '栅格布局',
            'icon': 'th',
            'columns': [
              {
                'span': 10,
                'list': [
                  {
                    'type': 'input',
                    'name': '备注',
                    'icon': 'regular/keyboard',
                    'options': {
                      'width': '100%',
                      'defaultValue': '',
                      'required': false,
                      'dataType': 'string',
                      'pattern': '',
                      'placeholder': '',
                      'readonly': false,
                      'disabled': false,
                      'clearable': false,
                      'remoteFunc': 'func_1540896450000_23389'
                    },
                    'key': '1540896450000_23389',
                    'model': 'input_1540896450000_23389',
                    'rules': [
                      {
                        'type': 'string',
                        'message': '单行文本格式不正确'
                      }
                    ]
                  }
                ]
              },
              {
                'span': 10,
                'list': [
                  {
                    'type': 'input',
                    'name': '摘要',
                    'icon': 'regular/keyboard',
                    'options': {
                      'width': '100%',
                      'defaultValue': '',
                      'required': false,
                      'dataType': 'string',
                      'pattern': '',
                      'placeholder': '',
                      'readonly': false,
                      'disabled': false,
                      'clearable': false,
                      'remoteFunc': 'func_1540896465000_90087'
                    },
                    'key': '1540896465000_90087',
                    'model': 'input_1540896465000_90087',
                    'rules': []
                  }
                ]
              }
            ],
            'options': {
              'gutter': 0,
              'justify': 'start',
              'align': 'top',
              'remoteFunc': 'func_1540896442000_72294'
            },
            'key': '1540896442000_72294',
            'model': 'grid_1540896442000_72294',
            'rules': []
          }
        ],
        'config': {
          'labelWidth': 100,
          'labelPosition': 'right'
        },
        'table': {
          'showRemove': false,
          'showIndexCol': false,
          'showEdit': false,
          'showExport': false,
          'showAdd': false,
          'stripe': true,
          'border': true
        }
      },
      editData: {},
      values: {},
      remoteFuncs: {
        BillType(resolve) {
          // 票据状态 select_1540796841000_76652
          // 获取到远端数据后执行回调函数
          // resolve(data)
          getCodeList('票据状态').then(response => { resolve(response.data) })
        }
      }
    }
  },
  methods: {
    handleSubmit() {
      this.$refs.generateForm.getData().then(data => {
        // 数据校验成功
        // data 为获取的表单数据
      }).catch(e => {
        // 数据校验失败
      })
    }
  }
}
</script>
<style>
  body{
    font-size:14px;color:#333;
  }
  .capital{
    height:28px;border-bottom:1px solid #ddd;text-align:center;line-height:28px;
  }
  .capital_{
    height:28px;text-align:center;padding-top:2px;
  }
  .capital_input{
    width:25px;height:25px;line-height:25px;overflow:hidden;
  }
  .borderbottom{
    border-bottom:2px solid #ddd;
  }
  .billMan{
    border-bottom:1px solid #ddd;border-right:1px solid #ddd;box-sizing:border-box;
  }
  .full{
    line-height:39px;text-align:center;border-right:1px solid #ddd;
  }
  .select{
    margin:0;margin-left:20px;margin-top:2px;width:60%;height:30px;line-height:30px;
  }
  el-select{
    margin:0;
  }
  .border-right{
    border-right:2px solid #ddd;box-sizing:border-box;
  }
  .border{
    border:1px solid #ddd;border-bottom:none;box-sizing:border-box;
  }
  input{
    /*height: 32px;*/
    line-height: 32px;
    width: 200px;
  }
  .vertical-text{
    -webkit-writing-mode: vertical-rl;
    -ms-writing-mode: bt-rl;
    writing-mode: vertical-rl;
    text-align: center;
    padding:15px;
    height:160px;
  }
</style>
